<%--
  Created by IntelliJ IDEA.
  User: ming
  Date: 2021/11/19
  Time: 11:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fm" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>登录</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>

</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <form action="/emp/login" method="post" >
                <div class="form-group">
                    <label for="exampleInputEmail1">用户名</label>
                    <input type="text" class="form-control" name="ename" id="exampleInputEmail1" placeholder="用户名">
                </div>
                <div class="form-group">
                    <label for="pwd">密码</label>
                    <input type="password" class="form-control" id="pwd" name="pwd" placeholder="password">
                </div>
                <div class="form-group">
                    <label for="phone">手机号</label>
                    <input type="text" class="form-control" id="phone" name="phone" placeholder="11位手机号">
                </div>
                <div class="form-group">
                    <label for="phone">验证码</label><span id="msg"></span>
                    <input type="text" class="form-control" id="code" name="code" placeholder="验证码"><button type="button" id="sendCode">点击发送验证码</button>
                </div>
<%--                验证码: <input type="text" id="code" name="code"> <br><button type="button" id="sendCode">点击发送验证码</button>---%>

                <button type="submit" id="sub" class="btn btn-default">立即登录</button>
            </form>
        </div>
    </div>
</div>

<script>
    var timer;
    var num = 60;
    /* 加载函数 */
    $(function () {
        $("#sub").click(function () {
            let data = $("#loginForm").serialize();
            $.ajax({
                url:"/emp/login",
                data:data,
                success:function (result) {
                    if (result=="0") {
                        //js 重定向条件
                        location.href="/emp/page";
                    }else{
                        $("#msg").text("用户名或密码或有误,请重新再试").css("color","red");
                    }
                }
            })
        })


        $("#code").change(function () {
            $.ajax({
                url: "/sys/checkCode?code=" + $("#code").val(),
                success: function (result) {
                    if (result == "0") {
                        $("#sub").prop("disabled",false);
                        $("#msg").text("验证码验证^_^").css("color","green");
                    }else{
                        $("#sub").prop("disabled",true);
                        $("#msg").text("验证码验证T_T").css("color","red");
                    }
                }
            })
        })
        $("#sendCode").click(function () {
            $.ajax({
                url: "/sys/getCode?phone=" + $("#phone").val(),
                success: function (result) {
                    if (result == "0") {
                        $("#sendCode").prop("disabled", true);
                        timer = setInterval(countDown, "1000");
                    } else {
                        $("#msg").text("验证码发送失败");
                    }
                }
            })
        })
    })

    function countDown() {
        num--;
        if (num != 0) {
            $("#sendCode").text("已发送:" + num);
            // $("#sendCode").val(num);
        } else {
            clearInterval(timer);
            // $("#sendCode").removeAttribute("disabled");
            $("#sendCode").prop("disabled", false);
            $("#sendCode").text("发送验证码");
            num = 60;
        }
    }
</script>



<%--<form action="/emp/login" method="post" id="loginForm">--%>
<%--    用户名: <input type="text" name="ename"> <br>--%>
<%--    密码: <input type="password" name="pwd"> <br>--%>
<%--    手机号: <input type="text" id="phone" name="phone"> &nbsp;--%>
<%--    <button type="button" id="sendCode">点击发送验证码</button>--%>
<%--    <br>--%>
<%--    验证码: <input type="text" id="code" name="code"> <br>--%>
<%--    <input type="button" value="登录" id="sub" disabled> <span id="msg"></span> <br>--%>
<%--</form>--%>




</body>
</html>
